<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>新增菜单</title>
</head>
<body>
<div layout:fragment="content">
    <div class="modal fade in" id="js-select-model">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">选择上级菜单</h4>
                </div>
                <div class="modal-body">
                    <div id="js-tree"></div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-success" data-dismiss="modal"
                                onclick="tree.selectFirstMenu()">设为顶级菜单
                        </button>
                    </div>
                    <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                    <button class="btn btn-primary" type="submit"
                            onclick="tree.selectParentMenu()">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12 i-navbar">
                <a class="btn btn-primary" th:href="@{/admin/system/menu/index.html}" data-pjax><i
                        class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">新增菜单</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form id="systemVariableForm"
                          th:action="@{/admin/system/menu/insert}"
                          method="POST">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="parent">上级菜单</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="parent"
                                           placeholder="不选择默认为顶级菜单"
                                           th:value="${permission?.name}?:''"
                                           disabled="disabled">
                                    <input type="hidden" name="parent"
                                           th:value="${permission?.id}?:''">
                                    <span class="input-group-btn">
                                            <button type="button" class="btn btn-info btn-flat"
                                                    data-target="#js-select-model" data-toggle="modal">选择</button>
                                        </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">菜单名称 <span class="i-label label-warning">必填</span></label>
                                <input class="form-control" id="name" name="name"
                                       placeholder="请输入权限名称"
                                       required
                                       type="text">
                            </div>
                            <div class="form-group">
                                <label for="type">类型 <span class="i-label label-warning">必填</span></label>
                                <select class="form-control" id="type" name="type">
                                    <option value="0" selected>菜单</option>
                                    <option value="1">数据</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="permission">权限标识 <span class="i-label label-warning">必填</span></label>
                                <input class="form-control" id="permission" name="permission"
                                       placeholder="请输入权限标识"
                                       required
                                       type="text">
                                <p class="help-block">例如：sys.manager.unit</p>
                            </div>

                            <div id="divId">
                                <div class="form-group">
                                    <label for="url">URL</label>
                                    <input class="form-control" id="url" name="url"
                                           placeholder="请输入URL"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="target">Target</label>
                                    <input class="form-control" id="target" name="target"
                                           placeholder="请输入target"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="icon">图标</label>
                                    <input class="form-control" id="icon" name="icon"
                                           placeholder="请输入图标"
                                           type="text">
                                    <p class="help-block">图标预览: <i id="js-show-icon"></i></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="available"> 是否启用
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button class="btn btn-primary" type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script>
        var tree;
        $(function () {
            $('#systemVariableForm').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    form.find("button:submit").attr('disable', true);
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        form.resetForm(); // 重置表单
                        layer.msg(data.message, {icon: 1});
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });

            tree = {
                $el: $('#js-tree'),
                obj: null,
                init: function () {
                    var that = this;
                    this.$el.jstree({
                        plugins: ['wholerow', 'json_data'],
                        core: {
                            dataType: 'json',
                            data: {
                                url: function (node) {
                                    return '/admin/system/menu/tree/' + (node.id === '#' ? '' : node.id)
                                }
                            }
                        }
                    }).on("dblclick.jstree", function (node) {
                        that.selectParentMenu();
                    });
                },
                selectParentMenu: function () { //选择父菜单
                    var tree = $.jstree.reference("#js-tree");
                    var node = tree.get_selected(true);
                    $("#parent").val(node[0].text);
                    $("input[name='parent']").val(node[0].id);
                    $("#js-select-model").modal("hide");
                },
                selectFirstMenu: function () { // 选择顶级权限
                    $("#parent").val("顶级菜单");
                    $("input[name='parent']").val("");
                    $("#js-select-model").modal("hide");
                }
            };
            tree.init();
            // 图标实时预览
            $('#icon').on('keyup', function () {
                $('#js-show-icon').attr('class', $(this).val());
            });
            $("#type").on("change", function () {
                if ($(this).val() === '0') {
                    $("#divId").show();
                } else {
                    $("#url").val("");
                    $("#target").val("");
                    $("#icon").val("");
                    $("#divId").hide();
                }
            });
        });
    </script>
</div>
</body>
</html>
